深入了解React Fiber：让你的应用更快、更流畅
React Fiber是React 16中引入的新协调算法，它通过将渲染任务分解为可中断的小单元（Fiber），实现了基于优先级的调度和时间切片技术。这种改进使React能够更高效地处理大型组件树，提升应用的响应性和渲染性能。Fiber架构支持中断和恢复渲染任务，允许高优先级更新抢占低优先级更新，同时引入了并行渲染和错误边界等新特性，为开发者提供了更强大的性能优化手段。
React Fiber是React核心算法的新实现，在React 16中推出，旨在提升React应用的性能和响应度。
它彻底改写了协调和渲染过程，使React能够以更具增量和中断性的方式运行，这使得它更适合处理大型和复杂的组件树。
要更好地理解React Fiber，我们先来看看传统的协调过程是如何运作的，然后通过一个简化的例子来说明这个概念。
传统的协调过程
在旧版React中，当你更新组件的状态或属性时，React会按以下步骤进行操作：
- 协调（Reconciliation）：构建更新后的组件树的虚拟表示。
- 比较（Diffing）：将新的虚拟树与之前的虚拟树进行比较，找出变化。
- 更新（Update）：将更改应用到实际的DOM。
这个过程在一个批次中完成，可能会导致性能问题，因为它可能引起渲染延迟和动画不流畅。
Diffing 算法
- 树的遍历：
Diffing算法首先会对前后两次渲染生成的虚拟 DOM 树进行深度优先遍历，比较相应节点之间的差异。 - 节点比较：在遍历的过程中，对比相同位置的节点，判断它们的类型是否相同，如果类型不同，则直接将该节点及其子树替换为新的节点；如果类型相同，则进行进一步比较。
- 属性更新：对比同类型节点的属性，判断属性是否发生了变化，如果发生了变化，则更新相应的属性值；如果属性没有变化，则继续比较子节点。
- 子节点递归：对比子节点，递归地应用 Diffing 算法，比较子节点之间的差异。
- 节点重排：根据比较结果，确定需要进行更新的节点以及更新方式，包括新增节点、移除节点、更新节点属性等操作。
- 批量更新：根据更新的结果，将需要更新的操作按照一定的优先级进行排列，然后批量执行更新操作，以减少渲染过程中的性能开销。
React Fiber
Fiber是React 16中引入的一种新的协调方式，它代表了React中的一个工作单元，用于实现协调更新、调度和渲染。每个组件实例对应一个fiber节点，但并不是每个组件都会有一个fiber节点，因为一些组件可能在渲染过程中被优化或合并。
Fiber的结构
- type: 表示节点的类型，可以是函数组件、类组件或原生 DOM 元素等。
- key: 用于标识节点的唯一性，通常在列表渲染时使用。
- props: 包含了组件实例的属性值，例如传递给组件的 props。
- stateNode: 表示节点对应的实际 DOM 元素、组件实例或其他数据结构。
- child、sibling、return: 分别表示子节点、兄弟节点和父节点，用于构建树形结构。
- alternate: 用于在执行更新时保存上一次渲染的状态，以支持协调更新和可中断渲染。
- effectTag: 用于标记节点在渲染过程中需要执行的操作，例如新增、更新、删除等。
- pendingProps、pendingState: 表示节点待更新的属性和状态，用于在批量更新时进行比较和合并。
- updateQueue: 用于存储节点待处理的更新操作，例如
setState、forceUpdate等。
渲染优化手段
在 React 之前，渲染是通过递归调用组件的 render 方法来完成的，这种方式是同步的，当组件树很大或者组件的渲染计算量很大时，会造成主线程被长时间阻塞，影响了用户体验。
React Fiber 引入了一种基于优先级的调度算法，它将渲染任务分解成一系列小的单元（称为 Fiber），这些 Fiber 可以中断和恢复。在每一帧中，React Fiber 会根据任务的优先级选择性地执行这些 Fiber，如果执行时间过长或者需要让出主线程，它可以中断当前任务，将控制权交还给浏览器，以保证用户界面的响应性。
任务划分：React 将整个渲染任务划分成小的可中断的单元，这些单元称为 Fiber。每个 Fiber 表示一个组件的渲染工作单元。
优先级调度：React 根据每个 Fiber 的优先级来确定何时执行哪些任务。较高优先级的任务将会先执行，以保证及时更新重要的部分。例如，用户交互（如单击或按键）的优先级高于不太重要的更新。这会带来响应速度更快的用户界面，因为高优先级更新可以中断并抢占低优先级更新。
时间切片：React Fiber 使用了一种叫做时间切片的技术，可以将工作分解为小的时间片，并将控制权间歇性地交还给浏览器事件循环。
中断与恢复：在每一帧中，React Fiber 会根据当前的任务优先级决定是否中断当前任务，并让出主线程，以保证页面的响应性。当浏览器空闲时，React Fiber 可以恢复被中断的任务，继续执行未完成的工作。
渲染阶段控制：React Fiber 通过渲染阶段的控制来确保渲染任务的顺序和正确性。它引入了不同的阶段（如 reconciliation 阶段和 commit 阶段），并且可以在不同阶段执行不同的任务，以提高渲染效率和用户体验。
并行渲染：允许 React 在多个线程中同时执行渲染任务，从而加快页面渲染速度，例如独立渲染多个组件树。
错误边界：Fiber 引入了更强大的机制来处理应用程序中的错误。错误边界是可以捕获组件树中任何位置的 JavaScript 错误并记录这些错误、显示回退 UI 或执行其他操作的组件。在 Fiber 之前，未处理的错误可能会破坏 React 的内部状态并导致整个应用程序崩溃。